<template>
    <div>
      <h2>二维码生成</h2>
      <input v-model="text" placeholder="请输入内容生成二维码" />
      <button @click="generateQRCode">生成二维码</button>
  
      <div v-if="qrCodeUrl">
        <img :src="qrCodeUrl" alt="二维码" />
      </div>
    </div>
  </template>
  
  <script>
  import { ref } from 'vue';
  import QRCode from 'qrcode';
  
  export default {
    name: 'QRCodeGenerator',
    setup() {
      const text = ref('');
      const qrCodeUrl = ref('');
  
      const generateQRCode = async () => {
        try {
          if (text.value) {
            qrCodeUrl.value = await QRCode.toDataURL(text.value);
          } else {
            alert('请输入内容');
          }
        } catch (err) {
          console.error(err);
        }
      };
  
      return {
        text,
        qrCodeUrl,
        generateQRCode
      };
    }
  };
  </script>
  
  <style scoped>
  input {
    padding: 8px;
    margin: 10px 0;
  }
  
  button {
    padding: 8px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
  }
  
  button:hover {
    background-color: #45a049;
  }
  
  img {
    margin-top: 20px;
  }
  </style>
  